/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState, useEffect } from 'react' // react属性
import './index.css' // 页面样式
import { CapsuleTabs, NavBar, Radio, ProgressCircle, ProgressBar, Toast, Button } from 'antd-mobile' // 三方UI组件
import { useNavigate } from 'react-router-dom' // 路由引入
import { constellation, getConstellationImg } from './list' // 十二星座
import { getHoroscope } from '../../../../api/index' // 星座运势接口
import { LeftOutline } from 'antd-mobile-icons' // icon图标


/* ts类型 */
type ZodiacSign = "白羊座" | "金牛座" | "双子座" | "巨蟹座" | "狮子座" | "处女座" | "天秤座" | "天蝎座" | "射手座" | "摩羯座" | "水瓶座" | "双鱼座";

type Todo = {
  yi: string;
  ji: string;
};

type Fortune = {
  all: number;
  love: number;
  work: number;
  money: number;
  health: number;
};

type Index = {
  all: string;
  love: string;
  work: string;
  money: string;
  health: string;
};

type Fortunetext = {
  all: string;
  love: string;
  work: string;
  money: string;
  health: string;
};

type Data = {
  title: ZodiacSign;
  time: string; // 日期，可以进一步定义为特定的日期格式
  todo: Todo;
  fortune: Fortune;
  index: Index;
  shortcomment: string;
  fortunetext: Fortunetext;
  type: string; // 可以进一步定义为特定的类型，如 "今日运势"
  uptype: string; // 可以进一步定义为特定的类型，如 "7月29日"
  luckynumber: string;
  luckycolor: string;
  luckyconstellation: ZodiacSign;
};



function MyFortune() {
  /* 路由 */
  const navigate = useNavigate();

  /* 声明变量 */
  const [isLoading, setLoading] = useState(true); // 新增 isLoading 状态，用于控制加载动
  const [constellName, setConstellName] = useState<string>('aquarius') // 选中的星座
  const [time, setTime] = useState<string>('today'); // 默认为今日
  const [horoscopeInfo, setHoroscopeInfo] = useState<Data | undefined>(undefined); // 运势信息
  // 星座日期类型列表
  const btnList: Array<{ title: string; value: string, type: string }> = [
    {
      title: '今日',
      value: 'today',
      type: 'primary'
    },
    {
      title: '明日',
      value: 'nextday',
      type: 'success'
    },
    {
      title: '本周',
      value: 'week',
      type: 'danger'
    },
    {
      title: '本月',
      value: 'month',
      type: 'warning'
    },
  ];

  /* 事件函数 */
  const getHoroscopeInfo = async () => {
    Toast.show({
      icon: 'loading',
      content: '加载中…',
      duration: 0,
    })
    try {
      const params = {
        type: constellName,
        time: time,
      }
      const res = await getHoroscope(params)
      setHoroscopeInfo(res.data.data)
      setLoading(false);
      Toast.clear()
      console.log(res);

    } catch (error) {
      Toast.clear()
      console.log(error);

    }
  }

  /* 函数调用 */
  useEffect(() => {
    getHoroscopeInfo()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [constellName, time]); // 注意这里的空数组，表示这个 effect 只在组件挂载时运行

  if (isLoading) return

  return (
    <>
      <div className="fortune-container">
        {/* 背景 */}
        <div className='v-bg'></div>
        <div className='content'>
          <NavBar backIcon={<LeftOutline color='#76c6b8' />} onBack={() => navigate(-1)}></NavBar>
          {/* 星座 */}
          <div className='constellation'>
            <Radio.Group value={constellName}>
              <CapsuleTabs defaultActiveKey='0'>
                {constellation.map((item, index) => {
                  return <CapsuleTabs.Tab title={<div className='list-cell' onClick={() => { setConstellName(item.type) }}>
                    <img src={item.imgurl} alt="" />
                    <h3>{item.title}</h3>
                    <h3>{item.date}</h3>
                    <div className='list-radio'>
                      <Radio value={item.type}></Radio>
                    </div>
                  </div>} key={index + 1}>
                  </CapsuleTabs.Tab>
                })}
              </CapsuleTabs>
            </Radio.Group>
          </div>
          {/* 时间 */}
          <div className='dateType'>
            {
              btnList.map((item, index) => {
                const color = item.type as ("default" | "primary" | "success" | "warning" | "danger" | undefined);
                return <Button key={index} size='small' shape='rounded' color={color} style={{ width: '20%' }} fill='outline' onClick={() => { setTime(item.value) }}>
                  {item.title}
                </Button>
              })}
          </div>
          {/* 运势介绍 */}
          <div className='fortune'>
            <div className='fortune-top'>
            <img src={horoscopeInfo?.title ? getConstellationImg(horoscopeInfo.title) : ''} alt="" />
            <p>
                {horoscopeInfo?.title}
                ·
                {horoscopeInfo?.time}运势
              </p>
            </div>
            <div className='fortune-content'>
              {/* 运势分数 */}
              <div className='percentage'>
                <ProgressCircle
                  percent={parseInt(horoscopeInfo?.index.all ?? '0', 10)}
                  style={{
                    '--size': '60px',
                    '--track-width': '4px',
                    '--fill-color': '#fff',
                    '--track-color': '#CDE2FF',
                  }}
                >
                  <div style={{ color: '#fff', fontSize: '.28rem' }}>{parseInt(horoscopeInfo?.index.all ?? '0', 10)}</div>
                  <div style={{ color: '#fff' }}>总分</div>
                </ProgressCircle>
                <div className='Progress-list'>
                  <div className='list'>
                    <span>爱情</span>
                    <div>
                      <ProgressBar percent={parseInt(horoscopeInfo?.index.love ?? '0', 10)} style={{
                        '--fill-color': '#fff',
                        '--track-width': '6px',
                        '--track-color': '#CDE2FF',
                      }} />
                    </div>
                  </div>
                  <div className='list'>
                    <span>工作</span>
                    <div>
                      <ProgressBar percent={parseInt(horoscopeInfo?.index.work ?? '0', 10)} style={{
                        '--fill-color': '#fff',
                        '--track-width': '6px',
                        '--track-color': '#CDE2FF',
                      }} />
                    </div>
                  </div>
                  <div className='list'>
                    <span>财运</span>
                    <div>
                      <ProgressBar percent={parseInt(horoscopeInfo?.index.money ?? '0', 10)} style={{
                        '--fill-color': '#fff',
                        '--track-width': '6px',
                        '--track-color': '#CDE2FF',
                      }} />
                    </div>
                  </div>
                  <div className='list'>
                    <span>健康</span>
                    <div>
                      <ProgressBar percent={parseInt(horoscopeInfo?.index.health ?? '0', 10)} style={{
                        '--fill-color': '#fff',
                        '--track-width': '6px',
                        '--track-color': '#CDE2FF',
                      }} />
                    </div>
                  </div>
                </div>
              </div>
              {/* 幸运 */}
              <div className='goodfortune'>
                {(time === 'today' || time === 'nextday') && (
                  <>
                    <div className='cell-list'>
                      <p className='text'>{horoscopeInfo?.luckyconstellation}</p>
                      <p className='tips'>贵人星座</p>
                    </div>
                    <div className='cell-list'>
                      <p className='text'>{horoscopeInfo?.luckycolor}</p>
                      <p className='tips'>幸运颜色</p>
                    </div>
                    <div className='cell-list'>
                      <p className='text'>{horoscopeInfo?.luckynumber}色</p>
                      <p className='tips'>幸运数字</p>
                    </div>
                  </>
                )}
              </div>
              {/* 建议 */}
              <div className='shortcomment'>
                <span>{horoscopeInfo?.shortcomment}</span>
              </div>
              {/* 评价概括 */}
              <div className='fortunetext'>
                <ul>
                  <li className='all'>
                    整体建议:{horoscopeInfo?.fortunetext.all}
                  </li>
                  <li className='love'>
                    爱情建议:{horoscopeInfo?.fortunetext.love}
                  </li>
                  <li className='work'>
                    工作建议:{horoscopeInfo?.fortunetext.work}
                  </li>
                  <li className='money'>
                    财运建议:{horoscopeInfo?.fortunetext.money}
                  </li>
                  <li className='health'>
                    身体建议:{horoscopeInfo?.fortunetext.health}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default MyFortune